<template>
	<view class="page">
		<nav-bar title="放水调度" leftArrow />

		<van-sticky :offset-top="46">
			<van-tabs v-model:active="active" @click="onTab">
				<van-tab v-for="tab in tabList" :title="tab.title" :name="tab.value"></van-tab>
			</van-tabs>
		</van-sticky>

		<van-pull-refresh class="van-pull-refresh-page-with-nav-tab" v-model="refreshing" @refresh="onRefresh">
			<van-list v-model:loading="loading" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
				@load="onLoad" class="universal-list-list">
				<template v-if="list.length">
					<van-cell v-for="item in list" :key="item">
						<view class="universal-list-item" @click="goLink(item.demandPlanId)">
							<view class="universal-list-head">
								<view class="universal-list-title">
									方案编号 {{ item.planNo }}
								</view>
								<view class="universal-list-status">
									<!-- UN_START("0", "未开启"),
									WAIT_PROCESS("3", "待处理"),
									ONGOING("1", "待审核"),
									FINISHED("2", "完结"), -->
									<!-- 完成 -->
									<van-tag v-if="item.flowStatus?.value === '2'"
										type="primary">{{ item.flowStatus?.label }}</van-tag>
									<!-- 未完成 -->
									<van-tag v-else type="warning">{{ item.flowStatus?.label }}</van-tag>
									<!-- <van-tag v-else type="warning">{{ item.auditStatus?.label }}</van-tag> -->
									<!-- START("0", "发起审批"),
									WAIT_AUDIT("1", "待审批"),
									AUDIT_SUCCESS("2", "审核成功"),
									AUDIT_FAIL("3", "审核失败"),
									AUDIT_BACK("4", "驳回"),
									WAIT_PROCESS("5", "待处理"), -->
								</view>
							</view>

							<view class="universal-list-main">
								<view class="universal-list-detail">
									<view class="universal-list-detail-title">调度工程：</view>
									<van-text-ellipsis class="universal-list-detail-cont" :content="item.projectName" />
								</view>
								<view class="universal-list-detail w-full">
									<view class="universal-list-detail-title">开始调度时间：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.dispatchStartTime" />
								</view>
								<view class="universal-list-detail w-full">
									<view class="universal-list-detail-title">计划灌水总量：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.totalWaterDemand + 'm³'" />
								</view>
								<view v-if="active === 1" class="universal-list-detail w-full">
									<view class="universal-list-detail-title">实灌总量：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.totalFillWater + 'm³'" />
								</view>
								<view v-if="active === 1" class="universal-list-detail w-full">
									<view class="universal-list-detail-title">完成时间：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.completeTime" />
								</view>
							</view>

							<view class="universal-list-footer">
								<view class="universal-list-footer-button">
									<template v-if="item.todoUsers && item.todoUsers.find(it => it == currentUserId)">
										<!-- 5处理 -->
										<view v-if="item.auditStatus?.value === '5'"
											class="universal-list-footer-button universal-list-footer-button-warning">
											处理
											<van-icon name="arrow" />
										</view>
										<!-- 1待审核 -->
										<view v-else-if="item.auditStatus?.value === '1'"
											class="universal-list-footer-button universal-list-footer-button-warning">
											审核
											<van-icon name="arrow" />
										</view>
									</template>
									<view v-else class="universal-list-footer-button">
										详情
										<van-icon name="arrow" />
									</view>
								</view>
							</view>
						</view>
					</van-cell>
				</template>
				<template v-else>
					<van-empty v-if="!loading" description="暂无数据" />
				</template>
			</van-list>
		</van-pull-refresh>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		apiWaterDemandPlanPageH5,
	} from '@/api/waterproofScheduling';

	import store from '@/store'

	const userInfo = store.getters.GET_USER_INFO.sysUser;
	const currentUserId = ref(Number(userInfo.userId) || '');

	const active = ref(0);
	const tabList = [
		// {
		// 	title: '全部',
		// 	value: '',
		// },
		{
			title: '待处理',
			value: 0,
		},
		{
			title: '已处理',
			value: 1,
		},
	];
	const list = ref([]);
	const total = ref(0);
	const listCache = {};
	const loading = ref(false);
	const finished = ref(false);
	const refreshing = ref(false);
	const pages = ref({
		pageNum: 1,
		pageSize: 10,
	})

	const onLoad = () => {
		getList();
	};

	const onRefresh = () => {
		refreshing.value = false;
		loading.value = true;
		finished.value = false;

		list.value = [];
		pages.value.pageNum = 1;
		onLoad();
	};

	const onTab = () => {
		onRefresh();
	};

	const getPageList = () => {
		// if (listCache[active.value] && listCache[active.value].length) {
		// 	list.value = listCache[active.value];
		// 	return;
		// }
		// list.value = [];

		apiWaterDemandPlanPageH5({
			...pages.value,
			status: active.value
		}).then(res => {
			setList(res, active.value)
		}).finally(() => {
			resetLoadingStatus()
		})
	}

	const getList = () => {
		getPageList();
	};

	const setList = (res, key) => {
		// 如果是第一页,列表数据清空
		if (pages.value.pageNum === 1) {
			list.value = [];
		};

		// 列表赋值
		res.data.map(item => {
			list.value.push(item)
		});
		listCache[key] = list.value;
		total.value = res.total;
	};

	const resetLoadingStatus = () => {
		// 数据获取完毕，加载状态更新
		loading.value = false;

		// 数据获取完毕，下拉刷新状态更新
		refreshing.value = false;

		// 数据全部加载完成
		if (list.value.length >= total.value) {
			finished.value = true;
		} else {
			// 如果数据还有未加载部分
			finished.value = false;
		}

		if (!finished.value) {
			pages.value.pageNum++;
		}
	}

	const goLink = (id) => {
		uni.navigateTo({
			url: `/pages/waterproofScheduling/detail?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/assets/universal-list.scss";
</style>